<template>
	<view class="content">
		<view class="example">
			<overhaul-step :bidding="isBidding" :active="active" />
			<view class="buttn">
				<button type="primary" @click="submitData">提交</button>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>基本信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>申请人员：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.create_user_name }}</text>
				</view>
			</view>
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>所属部门：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.apply_dept_name }}</text>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>申报时间：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.create_date }}</text>
				</view>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>检修信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.overhaul_type_desc }}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*单据类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.bill_type_desc }}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*施工类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.build_type_desc }}</text>
				</view>
			</view>
			<view v-if="showBuild">
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*施工单位：</label>
					</view>
					<view class="dec_ri">
						<text>{{ jsonData.build_unit }}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*单位负责人：</label>
					</view>
					<view class="dec_ri">
						<text>{{ jsonData.build_person }}</text>
					</view>
				</view>
			</view>
			<view class="dec_li dec_flex" v-if="jsonData.fault_class != 2">
				<view class="dec_le">
					<label>*检修装置：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.equipment_name }}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修设备：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.device_name }}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*设备位号：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.device_no }}</text>
				</view>
			</view>
			<view class="dec_li dec_flex" v-if="jsonData.work_hours">
				<view class="dec_le">
					<label>工时：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.work_hours }}</text>
				</view>
			</view>
			<view class="dec_li" v-if="jsonData.pics.length>0">
				<view class="dec_le">
					<label>拍照取证：</label>
				</view>
				<view class="dec_ri">
					<view class="pic-view">
						<view style="width: 70%; display: flex">
							<view v-for="(jtem, j) in jsonData.pics" :key="j" style="margin: 10rpx">
								<image :src="fileUrl + jtem.pic_url" class="detail_img" @click="previewImg(j)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>*检修内容：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.check_content }}</text>
				</view>
			</view>
		</view>

		<view>
			<view class="criter_bt">
				<view class="line"></view>
				<text>检修处理</text>
			</view>

			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>*检修处理：</label>
				</view>
				<view class="dec_ri">
					<radio-group @change="radioChange">
						<label>
							<radio value="r1" color="#267DFF" checked="true" style="transform: scale(0.8)" /><text
								style="margin-left: 10rpx">最终验收</text>
						</label>
						<label>
							<radio value="r2" color="#267DFF" style="transform: scale(0.8)" /><text
								style="margin-left: 10rpx">阶段验收</text>
						</label>
						<view>
							<label>
								<radio value="r3" color="#267DFF" style="transform: scale(0.8)" /><text
									style="margin-left: 10rpx">终止</text>
							</label>
							<label v-if="!showBuild">
								<radio value="r4" color="#267DFF" style="transform: scale(0.8); margin-left: 60rpx" />
								<text style="margin-left: 10rpx">交班</text>
							</label>
						</view>
					</radio-group>
				</view>
			</view>

			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>{{ showBuild ? '*负责人' : '*主修人' }}</label>
				</view>
				<view class="dec_ri">
					<text>{{ userName }}</text>
				</view>
			</view>
			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*签字确认：</label>
				</view>
				<view class="sign-view">
					<image :src="'data:image/svg+xml;base64,' + signStr" v-if="signStr != ''"></image>
					<Signature ref="sig" v-model="signStr" class="signture"></Signature>
					<text @click="startSign()">+</text>
				</view>
			</view>

			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*配合人：</label>
				</view>
				<view class="dec_ri">
					<text>{{ jsonData.cooperate_user }}</text>
				</view>
			</view>

			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*签字确认：</label>
				</view>
				<view class="sign-view">
					<image :src="'data:image/svg+xml;base64,' + signStr2" v-if="signStr2 != ''"></image>
					<Signature ref="sig2" v-model="signStr2" class="signture"></Signature>
					<text @click="startSign2()">+</text>
				</view>
			</view>

			<view class="dec_li dush_li bottom-view" v-if="result == 3">
				<view class="dec_le">
					<label>*班长：</label>
				</view>
				<view class="sign-view">
					<image :src="'data:image/svg+xml;base64,' + signStr3" v-if="signStr3 != ''"></image>
					<Signature ref="sig3" v-model="signStr3" class="signture"></Signature>
					<text @click="startSign3()">+</text>
				</view>
			</view>

			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label v-if="result != 5">*检修时间：</label>
					<label v-if="result == 5">*终止时间：</label>
				</view>
				<view class="dec_ri">
					<uni-datetime-picker type="datetime" disabled class="m-picker" v-model="permissionDate"
						:border="false" :clearIcon="false" />
				</view>
			</view>
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>拍照取证：</label>
				</view>
				<view class="dec_ri">
					<uni-file-picker limit="3" :sizeType="sizeType" @select="picSelect"
						@delete="picDelete"></uni-file-picker>
				</view>
			</view>



			<view class="dec_li dush_li">
				<view class="dec_le">
					<label v-if="result != 5">*今日工作情况：</label>
					<label v-if="result == 5">*终止原因：</label>
				</view>
				<view class="dec_ri">
					<uni-easyinput type="textarea" v-model="desc" maxlength="500"
						placeholder="请描述,500字以内"></uni-easyinput>
				</view>
			</view>
			<view class="dec_li dush_li" v-if="result != 5">
				<view class="dec_le">
					<label v-if="result != 1 && result != 6">明日工作计划：</label>
					<label v-if="result == 1 || result == 6">*明日工作计划：</label>
				</view>
				<view class="dec_ri">
					<uni-easyinput type="textarea" v-model="workPlan" maxlength="500"
						placeholder="请描述,500字以内"></uni-easyinput>
				</view>
			</view>

			<view class="dush_li bottom-view" v-if="result == 1 || result == 3">
				<view class="dec_le">
					<view class="dec_li">
						<label>*验收人：</label>
					</view>
				</view>
				<view style="flex: 0.8;">
					<!--      <uni-combox
            :candidates="checks"
            placeholder="请选择验收人"
            v-model="checkName"
          ></uni-combox> -->
					<!-- <uni-data-select v-model="checkName" :localdata="checks"></uni-data-select> -->
					<view class="dec_ri">
						<picker @change="checksChang" :value="checksIndex" :range="checks" range-key="name">
							<view>{{  checks[checksIndex].name }}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<view v-if="result == 6">
			<view class="criter_bt">
				<view class="line"></view>
				<text>交班</text>
			</view>
			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*主修人：</label>
				</view>
				<view class="dec_ri">
					<picker @change="memberPickerChange" :value="memberIndex" :range="members" range-key="name">
						<view>{{ members[memberIndex].name }}</view>
					</picker>
				</view>
			</view>

			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*计划开始时间：</label>
				</view>
				<view class="dec_ri">
					<uni-datetime-picker type="datetime" class="m-picker" v-model="affirmDate" :border="false"
						:clearIcon="false" />
				</view>
			</view>

			<view class="dec_li dush_li" style="margin-right: 20rpx">
				<view class="dec_le">
					<label>*认定描述：</label>
				</view>
				<view class="dec_ri">
					<uni-easyinput type="textarea" v-model="affirmDesc" placeholder="请描述备注内容,200字以内"></uni-easyinput>
				</view>
			</view>
		</view>
		<helang-compress ref="helangCompress"></helang-compress>
	</view>
</template>

<script>
	import OverhaulStep from '@/components/selfs/OverhaulStep.vue'
	import Signature from '@/components/sin-signature/sin-signature.vue'
	import {
		getFormatDateTime
	} from '@/utils/date-util.js'
	import {
		svg2Png
	} from '@/utils/base64.js'
	import helangCompress from '@/components/helang-compress/helang-compressTwo'
	import {
		FILE_URL,
		saveOverhaulHandleResult,
		uploadBase64Img,
		queryTeamMembersList,
		getUserByDept,
	} from '@/api/maintenance/selfs.js'
	export default {
		components: {
			OverhaulStep,
			Signature,
			helangCompress,
		},
		data() {
			return {
				sizeType: ['compressed'],
				isBidding: false,
				active: 4,
				userName: '',
				userId: '',
				deptName: '',
				deptId: '',
				signStr: '',
				signPng: '',
				signStr2: '',
				signPng2: '',
				signStr3: '',
				signPng3: '',
				now: '',
				permissionDate: '',
				jsonData: {},
				fileUrl: FILE_URL,
				desc: '',
				result: 3,
				imgPaths: [],
				affirmDesc: '',
				affirmDate: '',
				members: [{
					name: '请选择主修人'
				}],
				memberIndex: 0,
				checks: [{
					name: '请选择验收人'
				}],
				checkName: '',
				users: [],
				showBuild: false,
				workPlan: '',
				checksIndex:0
			}
		},
		methods: {
			checksChang({detail}){
				this.checksIndex = detail.value
			},
			dateChange(e) {
				this.permissionDate = e.detail.value
			},
			radioChange: function(evt, i) {
				setTimeout(() => {
					this.permissionDate = getFormatDateTime()
					this.affirmDate = getFormatDateTime()
				}, 500)
				if ('r1' === evt.detail.value) {
					this.result = 3
				} else if ('r2' == evt.detail.value) {
					this.result = 1
				} else if ('r3' == evt.detail.value) {
					this.result = 5
				} else {
					this.result = 6
				}
			},

			picSelect(e) {
				this.batchCompress(e.tempFilePaths)
			},
			picDelete(e) {
				console.log('DELETE', e)
				this.deletePic(e.tempFile.path)
			},
			// 批量压缩
			batchCompress(paths) {
				this.$refs.helangCompress
					.batchCompress({
						batchSrc: paths,
						maxSize: 500,
						fileType: 'png',
						quality: 0.4,
						minSize: 180,
						progress: (res) => {
							uni.showLoading({
								title: `进度:${res.done + res.fail}/${res.count}`,
							})
							console.log(res)
						},
					})
					.then((res) => {
						uni.hideLoading()
						uni.showToast({
							title: '压缩完成',
							icon: 'success',
						})
						this.uploadImg(res, paths)
					})
					.catch((err) => {
						uni.hideLoading()
						uni.showToast({
							title: '压缩失败' + err,
							icon: 'none',
						})
					})
			},
			uploadImg(base64Pics, paths) {
				let imgs = []
				for (let i = 0; i < base64Pics.length; i++) {
					imgs.push({
						img: base64Pics[i].slice(22)
					})
				}
				let json = JSON.stringify(imgs)
				let params = {
					data: json
				}
				uploadBase64Img(params).then((res) => {
					console.log('UPLOAD', res)
					let json = res.datas
					for (let j = 0; j < json.length; j++) {
						this.imgPaths.push({
							path: paths[j],
							pic_url: json[j].new_file_url,
						})
					}
				})
			},
			deletePic(path) {
				for (let i = 0; i < this.imgPaths.length; i++) {
					if (path == this.imgPaths[i].path) {
						this.imgPaths.splice(i, 1)
						return
					}
				}
			},

			previewImg(index) {
				let pics = []
				for (let i = 0; i < this.jsonData.pics.length; i++) {
					pics[i] = this.fileUrl + this.jsonData.pics[i].pic_url
					console.log('PREVIEW', pics[i])
				}
				uni.previewImage({
					urls: pics,
					current: index,
				})
			},

			async startSign() {
				let s = await this.$refs.sig.getSyncSignature()
				svg2Png(s, (e) => {
					this.signPng = e
					console.log('签名数据', this.signPng)
				})
			},

			async startSign2() {
				let s = await this.$refs.sig2.getSyncSignature()
				svg2Png(s, (e) => {
					this.signPng2 = e
					console.log('签名数据2', this.signPng2)
				})
			},

			async startSign3() {
				let s = await this.$refs.sig3.getSyncSignature()
				svg2Png(s, (e) => {
					this.signPng3 = e
					console.log('签名数据3', this.signPng3)
				})
			},

			fetchChecks() {
				let params = {
					dept_id: this.jsonData.use_dept
				}
				getUserByDept(params).then((res) => {
					this.users = res.datas
					// for (let i = 0; i < this.users.length; i++) {
					//   this.checks.push(this.users[i].user_name)
					// }
					let arr = res.datas.map(v => {
						return {
							name: v.user_name,
							value: v.user_id
						}
					})
					this.checks   = this.checks.concat(arr)
				})
			},

			// 主修人
			fetchUserData() {
				let params = {
					overhaul_id: this.jsonData.overhaul_id,
					user_id: this.userId,
				}
				queryTeamMembersList(params).then((res) => {
					for (let i = 0; i < res.datas.length; i++) {
						this.members.push({
							name: res.datas[i].user_name,
							user_id: res.datas[i].user_id,
						})
					}
				})
			},
			memberPickerChange(e) {
				this.memberIndex = e.detail.value
			},

			submitData() {
				if (this.signStr == '' || this.signStr2 == '') {
					uni.showToast({
						title: '请签名确认',
						icon: 'none',
					})
					return
				}
				if (this.result == 3) {
					if (this.signStr3 == '') {
						uni.showToast({
							title: '请签名确认',
							icon: 'none',
						})
						return
					}
				}
				// if (this.imgPaths.length == 0) {
				//   uni.showToast({
				//     title: '请先拍照取证',
				//     icon: 'none',
				//   })
				//   return
				// }
				if (this.desc == '') {
					if (this.result == 5) {
						uni.showToast({
							title: '请填写终止原因',
							icon: 'none',
						})
					} else {
						uni.showToast({
							title: '请填写今日工作情况',
							icon: 'none',
						})
					}
					return
				}
				if (this.result == 1 || this.result == 6) {
					if (this.workPlan == '') {
						uni.showToast({
							title: '请填写明日工作计划',
							icon: 'none',
						})
						return
					}
				}
				if (this.result == 1 || this.result == 3) {
					if (this.checks[this.checksIndex].name == '请选择验收人') {
						uni.showToast({
							title: '请选择验收人',
							icon: 'none',
						})
						return
					}

					// if (this.checks.indexOf(this.checkName) < 0) {
					//   uni.showToast({
					//     title: '请选择验收人',
					//     icon: 'none',
					//   })
					//   return
					// }
				}

				if (this.result == 6) {
					if (this.memberIndex == 0) {
						uni.showToast({
							title: '请选择交班主修人',
							icon: 'none',
						})
						return
					}
					if (this.affirmDesc == '') {
						uni.showToast({
							title: '请填写交班认定描述',
							icon: 'none',
						})
						return
					}
				}

				// 6是交班
				let params
				if (this.result == 6) {
					params = {
						plan_id: this.jsonData.plan_id,
						overhaul_id: this.jsonData.overhaul_id,
						user_id: this.userId,
						pic: JSON.stringify(this.imgPaths),
						overhaul_date: this.permissionDate,
						major_sign: this.signPng,
						user_sign: this.signPng2,
						handle_type: this.result,
						handle_desc: this.desc,
						major_user: this.members[this.memberIndex].user_id,
						confirm_desc: this.affirmDesc,
						plan_begin_date: this.affirmDate,
						work_plan: this.workPlan,
					}
				} else {
					params = {
						plan_id: this.jsonData.plan_id,
						overhaul_id: this.jsonData.overhaul_id,
						user_id: this.userId,
						pic: JSON.stringify(this.imgPaths),
						overhaul_date: this.permissionDate,
						major_sign: this.signPng,
						user_sign: this.signPng2,
						handle_type: this.result,
						handle_desc: this.desc,
						work_plan: this.workPlan,
					}
					if (this.result == 1 || this.result == 3) {
						// params.check_user =
						//   this.users[this.checks.indexOf(this.checkName)].user_id
						// params.check_user = this.checkName
						params.check_user = this.checks[this.checksIndex].value
					}
					if (this.result == 3) {
						params.technician_sign = this.signPng3
					}
				}
				uni.showLoading({
					title: '正在提交',
				})
				saveOverhaulHandleResult(params).then((res) => {
					uni.$emit('handle_refresh')
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1500,
					})
					setTimeout(function() {
						// uni.navigateBack({})
						window.android.backWeb();
					}, 500)
				})
			},
		},
		onLoad: function(e) {
			this.type = e.type
			this.userName = e.userName
			this.userId = e.userId
			this.deptName = e.deptName
			this.deptId = e.deptId
			this.jsonData = JSON.parse(e.jsonData)
			this.fetchUserData()
			this.fetchChecks()
			this.now = getFormatDateTime()
			this.isBidding = this.jsonData.is_bidding == 1
			if (!this.isBidding) {
				this.active = this.active - 1
			}
			this.showBuild = this.jsonData.bill_type == 3
			setTimeout(() => {
				this.permissionDate = getFormatDateTime()
				this.affirmDate = getFormatDateTime()
			}, 500)
		},
	}
</script>
<style lang="scss" scoped>
	// ::v-deep .uni-select__selector-scroll{  
	//     max-height: 100rpx;  
	// }
</style>
<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
	}

	view {
		font-size: 28upx;
		line-height: inherit;
	}

	.content {
		width: 100%;
		margin: 0 auto 80upx;
	}

	.example {
		width: 91%;
		margin: 20upx auto 20upx;
		padding: 0 30upx 0upx;
	}

	.example-body {
		padding: 0 40upx;
	}

	.buttn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		background-color: #FFF;

	}

	.buttn button {
		font-size: 30upx;
		background: #267dff;
		border-radius: 0;
		flex: 1;
		border-radius: 8rpx;
	}

	.criter_bt {
		padding: 0 10px;
		height: 50px;
		background-color: #f7f7f7;
		font-weight: normal;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.line {
		width: 8upx;
		height: 30upx;
		background: #267dff;
		border-radius: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.criter_bt text {
		padding-left: 10upx;
		vertical-align: middle;
		font-size: 32upx;
		color: #333333;
	}

	.dec_main {
		width: 94%;
	}

	.dec_li {
		width: 96%;
		margin: 30rpx 20rpx;
		overflow: hidden;
	}

	.dush_li {
		border-bottom: 1upx solid #f4f4f4;
		padding-bottom: 20upx;
	}

	.dec_le {
		width: 30%;
		float: left;
	}

	.dec_ri {
		float: left;
		width: 70%;
	}

	.dec_flex {
		min-height: 60rpx;
		display: flex;
		align-items: center;
	}

	.dec_li label {
		color: #267dff;
		font-size: 30upx;
	}

	.dec_li text {
		color: #666666;
		font-size: 30upx;
	}

	.dec_li .inppu {
		font-size: 30upx;
	}

	.sign-view {
		display: flex;
		align-items: center;
	}

	.sign-view image {
		width: 150rpx;
		height: 60rpx;
		border: #d4ced8 solid 1rpx;
		border-radius: 5rpx;
		margin-right: 30rpx;
	}

	.sign-view text {
		width: 150rpx;
		height: 60rpx;
		border: #267dff solid 1rpx;
		border-radius: 5rpx;
		color: #267dff;
		font-size: 45rpx;
		text-align: center;
	}

	.signture {
		width: 0;
		height: 0;
	}

	.m-picker {
		margin-left: -25rpx;
	}

	.bottom-view {
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.detail_img {
		width: 150rpx;
		height: 150rpx;
		border: #f4f4f4 solid 1rpx;
	}

	.pic-view {
		display: flex;
		align-items: center;
	}
</style>